<template>
    <div class="dialog-box">
        <el-dialog class="dialog" v-model="visible" title="取消预点" top="80px" draggable overflow :close-on-click-modal="false"
            :close-on-press-escape="false" :show-close="false">
            <el-divider />
            <el-form ref="formRef" :model="form.re" label-width="auto" size="large" style="margin-top: 20px;"> 
                <el-form-item label="取消原因：" style="margin-bottom: 25px;">
                    <el-select v-model="form.re.blackReason" filterable clearable placeholder="选择取消原因" size="large" style="width: 50%;">
                        <el-option v-for="(item,index) in cancel_options.re" :label="item.name" :value="item.name" :key="index"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注：" style="margin-bottom: 25px;" v-if="form.re.blackReason == '其它'">
                    <el-input v-model="form.re.remark" placeholder="输入备注" type="textarea" clearable/>
                </el-form-item>
            </el-form>
            <div class="footer-box">
                <el-button class="cancel" @click="handleCancel">取消</el-button>
                <el-button class="submit" @click="handleSubmit">确认</el-button>
            </div> 
        </el-dialog>
    </div>
</template>
  
<script setup>
import Api from '@/api' 
const props = defineProps({
    visible: {
        type: Boolean,
        required: false,
    },
    rserveCode: {
        type: String,
        required: false,
        default: ''
    } 
})
const visible = toRef(props, 'visible')

// 打开窗口
let user = reactive({
    re: {}
})
let currentCard = ref(0)
const open = (data) => {
    // console.log('data :>> ', data);
    user.re = data.user
    currentCard.value = data.currentCard
    // console.log(user.re, currentCard.value, user.re.cardList[0])
}
// 暴露方法
defineExpose({ open })

// 获取原因options
let cancel_options = reactive({ re: [] })
const get_cancel_options = (params) => {
    Api.Common.PcObjProcess.Do({ "functionName": "GetDicData", "orgCode": "0004", "contentData": { parentCode: "106" } }).then(res => {
        // console.log('获取原因options res :>> ', res);
        cancel_options.re = res.result
    })
}
onMounted(() => {
    get_cancel_options()
})

let form = reactive({ re: {} })
// 取消
const emit = defineEmits(['emitCancel', 'emitSubmit'])
const handleCancel = (params) => {
    emit('emitCancel', 'cancel')
}
// 确认
const formRef = ref()
const handleSubmit = (params) => { 
    // 此处没用:rules="rules"
    formRef.value.validate(valid => { 
        if (valid) { 
            if(!form.re.blackReason){
                ElNotification({ title: '提示', message: '请选择取消原因', type: 'warning'})
                return
            }
            let contentData = { code: props.rserveCode, reason: form.re.blackReason}  
            if(form.re.blackReason == '其它' && form.re.remark){ 
                contentData.reason = form.re.blackReason + '：' + form.re.remark
            }  
            let sendModal = { "functionName": "ReserveCancel", "contentData": contentData }
            Api.Common.PcObjProcess.Do(sendModal).then(res => {
              console.log(res);
              ElNotification({ title: '提示', message: '取消成功', type: 'success'})
              emit('emitSubmit', 'Submit')
            })
        }
    }) 
}
</script>
  
<style  lang="scss" scoped>
.dialog-box {

    ::v-deep {
        .el-dialog {
            width: 600px;
            // height: 400px;
            border-radius: 16px;
            padding-left: 60px;
            padding-right: 60px;
            padding-bottom: 40px;
        }

        .el-dialog__title {
            font-weight: bold;
            font-size: 20px;
            color: #212121;
            line-height: 36px;
            // padding-left: 60px;
        }

        .el-divider {
            margin: 0;
        }

        .el-form-item__label {
            font-size: 16px;
            color: #212121;

        }
    }

    .footer-box {
        margin-top: 60px;
        display: flex;
        justify-content: center;

        .cancel {
            width: 160px;
            height: 60px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #FF6A00;
            font-size: 24px;
            color: #FF6A00;
        }

        .submit {
            width: 160px;
            height: 60px;
            background: #FF6A00;
            border-radius: 8px;
            font-size: 24px;
            color: #FFFFFF;
            margin-left: 30px;
        }
    }


}
</style>
  